<template>
  <div class="app-container documentation-container">
    <el-calendar v-model="value">
      <template slot="dateCell" slot-scope="{date, data}">
        <!--自定义内容-->
        <div @click="changeTime(date,data)">
          <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
          <ul>
            <li>摸鱼</li>
            <li>摸鱼</li>
            <li>摸鱼</li>
            <li>摸鱼</li>
            <li>摸鱼</li>
            <li>摸鱼</li>
            <li>摸鱼</li>
            <li>摸鱼</li>
            <li>摸鱼</li>
            <li>摸鱼</li>
          </ul>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
  export default {
    name: 'Documentation',
    components: {},
    data() {
      return {
        value: new Date()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .documentation-container {
    margin: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
</style>
